<template>
  <div class="loading" v-if="step === 0"></div>
  <transition name="van-fade">
    <div v-show="step === 1" :class="['main']">
      <div class="logo flex_center">
        <img class="logo_icon" src="http://cloud.mirroractivity.cn/test/back_icon.png/logo@2x.png" />COOL瓜测评
      </div>
      <img class="main_bg" src="http://cloud.mirroractivity.cn/test/back_icon.png/home_bg.png" />
      <img class="cont" src="http://cloud.mirroractivity.cn/test/back_icon.png/home_bg1.png" />
      <div class="footer_btn" @click="step = 2">进入测评</div>
    </div>
  </transition>
  <div class="next_main pt-21" v-show="step === 2">
     <div class="logo flex_center mt-21">
      <img class="logo_icon" src="http://cloud.mirroractivity.cn/test/back_icon.png/logo@2x.png" />COOL瓜测评
    </div>
    <div class="prompt mt-26">当你来到人间，或许你真正的目的是些什 么</div>
    <div class="prompt_txt">—— <text class="mr-30 ml-30">该如何称呼你？</text> ——</div>
    <div class="input_box flex_center">
      <img class="input_icon" src="http://cloud.mirroractivity.cn/test/back_icon.png/border_l.png" />
      <input v-model="userName" @focus="userFocus" class="input" type="text" placeholder="在这输入你的昵称" placeholder-class="input_placeholder">
      <img class="input_icon" src="http://cloud.mirroractivity.cn/test/back_icon.png/border_r.png" />
    </div>
    <div v-if="userName" class="next_btn mt-82" @click="onSecondNext">开始测评吧~</div>
    <div :class="['back flex_center', userName ? 'mt-15' : 'mt-102' ]" @click="step = 1, userName = ''">
      <img class="back_icon" src="http://cloud.mirroractivity.cn/test/back_icon.png/back_icon.png" />返回
    </div>
  </div>
  <div class="main container3" v-show="step === 3">
    <div class="question_desc">
      <div class="question_tips">答題小提醒： <br>任何的变动都可能会改变结局的走向</div>
      <!-- <div class="question_count">QUESTION {{ active }}</div> -->
      <div class="question_count">Q{{ active }}</div>
      <!-- <div class="question">{{ scoreList[active - 1].question }}</div> -->
    </div>
    <div class="question">{{ scoreList[active - 1].question }}</div>

    <div class="select_root">
      <div class="select_label flex_a_c" @click="onChooseResult(1)">
        <button class="select_btn flex_center">
          <div :class="['select_icon',  result[active] === 1 && 'on']"></div>
        </button>
        非常不符合
      </div>
      <div class="select_label flex_a_c" @click="onChooseResult(2)">
        <button class="select_btn flex_center">
          <div :class="['select_icon',  result[active] === 2 && 'on']"></div>
        </button>
        比较不符合
      </div>
      <div class="select_label flex_a_c" @click="onChooseResult(3)">
        <button class="select_btn flex_center">
          <div :class="['select_icon',  result[active] === 3 && 'on']"></div>
        </button>
        有点不符合
      </div>
      <div class="select_label flex_a_c" @click="onChooseResult(4)">
        <button class="select_btn flex_center">
          <div :class="['select_icon',  result[active] === 4 && 'on']"></div>
        </button>
        不确定
      </div>
      <div class="select_label flex_a_c" @click="onChooseResult(5)">
        <button class="select_btn flex_center">
          <div :class="['select_icon',  result[active] === 5 && 'on']"></div>
        </button>
        有点符合
      </div>
      <div class="select_label flex_a_c" @click="onChooseResult(6)">
        <button class="select_btn flex_center">
          <div :class="['select_icon',  result[active] === 6 && 'on']"></div>
        </button>
        比较符合
      </div>
      <div class="select_label flex_a_c" @click="onChooseResult(7)">
        <button class="select_btn flex_center">
          <div :class="['select_icon',  result[active] === 7 && 'on']"></div>
        </button>
        非常符合
      </div>
    </div>
    <div class="flex_center fz-14 mt-28" style="color: #222;">
      <div class="step mr-12">
        <div class="step_cont" :style="{ width: Math.round(active * (100 / scoreList.length)) + '%' }"></div>
      </div>
      {{ Math.round(active * (100 / scoreList.length)) + '%' }}
    </div>
    <div v-show="active === scoreList.length" class="next_btn mt-41" @click="onThreeNext">查看测评结果</div>
    <div :class="['back flex_center', active === scoreList.length ? 'mt-15' : 'mt-32']" @click="onStep2Back">
      <img class="back_icon" src="http://cloud.mirroractivity.cn/test/back_icon.png/back_icon.png" />{{ active === 1 ? '返回' : '上一题' }}
    </div>
  </div>
  <div class="main flex_center flex_c" v-show="step === 4">
    <div class="wait">测评结果正在赶来<text class="loading-dot">.</text><text class="loading-dot">.</text><text class="loading-dot">.</text></div>
    <img src="http://cloud.mirroractivity.cn/test/back_icon.png/wait.png" class="wait_img"/>
  </div>
</template>
<script setup>
import { BigNumber } from 'bignumber.js'
import { ref, reactive, onMounted, nextTick  } from 'vue'
import { useRouter } from 'vue-router'
let router = useRouter()
let step = ref(0)
let userName = ref('')
let active = ref(1)
let userFocus = event => {
  // if (event.target && event.target.tagName === 'INPUT') {
    // 键盘弹出时，将页面内容向上滚动一定距离（例如50px）
    window.scrollTo({ top: 200, behavior: 'smooth' });
  // }
}
onMounted(() => {
  prevLoad()
})
const getImageUrl = image => {
  // 参数一: 相对路径
  // 参数二: 当前路径的URL
  return new URL(`/src/assets/${image}`, import.meta.url).href
}
// 防止首页图片没加载完  导致卡顿无淡入效果
let prevLoad = () => {
  let count = 0
  let arr = [
    'home_bg.png',
    'home_bg1.png'
  ]
  arr.forEach(src => {
    let Img = new Image()
    Img.src = getImageUrl(src)
    Img.onload = (e) => {
      count++
      if (count === arr.length) {
        nextTick(() => {
          step.value = 1
        })
      }
    }
  })
}
let onSecondNext = () => {
  if (!userName.value) {
    uni.showToast({
      title: '请输入昵称',
      icon: 'none'
    })
    return
  }
  step.value = 3
  window.scrollTo({ top: 0, behavior: 'smooth' });

}
let onStep2Back = () => {
  if (active.value !== 1) {
    --active.value
  } else {
    --step.value
  }
}
let maxVal = ref({ type: 0, value: 0})
let onThreeNext = () => {
  step.value = 4
  console.log('3333')
  setTimeout(() => {
    console.log('4444')
    router.replace(`/test/result?answer=${maxVal.value.type || 1}&userName=${userName.value}`)
  }, 3000)
}
let result = reactive({})
let scoreList = reactive([
  { id: 1, question: "总的来说,我不喜欢让恋人知道自己内心深处的感觉", reverseScored: false },
  { id: 2, question: "我担心我会被抛弃", reverseScored: false },
  { id: 3, question: "我觉得跟恋人亲近是一件惬意的事情", reverseScored: true },
  { id: 4, question: "我很担心我的恋爱关系", reverseScored: false },
  { id: 5, question: "当恋人开始要跟我亲近时,我发现我自己在退缩", reverseScored: false },
  { id: 6, question: "我担心恋人不会像我关心他(/她)那样地关心我", reverseScored: false },
  { id: 7, question: "当恋人希望跟我非常亲近时,我会觉得不自在", reverseScored: false },
  { id: 8, question: "我有点担心会失去恋人", reverseScored: false },
  { id: 9, question: "我觉得对恋人开诚布公,不是一件很舒服的事情", reverseScored: false },
  { id: 10, question: "我常常希望恋人对我的感情和我对恋人的感情一样强烈", reverseScored: false },
  { id: 11, question: "我想与恋人亲近,但我又总是会退缩不前", reverseScored: false },
  { id: 12, question: "我常常想与恋人形影不离,但有时这样会把恋人吓跑", reverseScored: false },
  { id: 13, question: "当恋人跟我过分亲密的时候,我会感到内心紧张", reverseScored: false },
  { id: 14, question: "我担心一个人独处", reverseScored: false },
  { id: 15, question: "我愿意把我内心的想法和感觉告诉恋人,我觉得这是一件自在的事情", reverseScored: true },
  { id: 16, question: "我想跟恋人非常亲密的愿望,有时会把恋人吓跑", reverseScored: false },
  { id: 17, question: "我试图避免与恋人变得太亲近", reverseScored: false },
  { id: 18, question: "我需要我的恋人一再地保证他/她是爱我的", reverseScored: false },
  { id: 19, question: "我觉得我比较容易与恋人亲近", reverseScored: true },
  { id: 20, question: "我觉得自己在要求恋人把更多的感觉,以及对恋爱关系的投入程度表现出来", reverseScored: false },
  { id: 21, question: "我发现让我依赖恋人,是一件困难的事情", reverseScored: false },
  { id: 22, question: "我并不是常常担心被恋人抛弃", reverseScored: true },
  { id: 23, question: "我倾向于不跟恋人过分亲密", reverseScored: false },
  { id: 24, question: "如果我无法得到恋人的注意和关心,我会心烦意乱或者生气", reverseScored: false },
  { id: 25, question: "我跟恋人什么事情都讲", reverseScored: true },
  { id: 26, question: "我发现恋人并不愿意像我所想的那样跟我亲近", reverseScored: false },
  { id: 27, question: "我经常与恋人讨论我所遇到的问题以及我关心的事情", reverseScored: true },
  { id: 28, question: "如果我还没有恋人的话,我会感到有点焦虑和不安", reverseScored: false },
  { id: 29, question: "我觉得依赖恋人是很自在的事情", reverseScored: true },
  { id: 30, question: "如果恋人不能像我所希望的那样在我身边时,我会感到灰心丧气", reverseScored: false },
  { id: 31, question: "我并不在意从恋人那里寻找安慰,听取劝告,得到帮助", reverseScored: true },
  { id: 32, question: "如果在我需要的时候,恋人却不在我身边,我会感到沮丧", reverseScored: false },
  { id: 33, question: "在需要的时候,我向恋人求助,是很有用的", reverseScored: true },
  { id: 34, question: "当恋人不赞同我时,我觉得确实是我不好", reverseScored: false },
  { id: 35, question: "我会在很多事情上向恋人求助,包括寻求安慰和得到承诺", reverseScored: true },
  { id: 36, question: "当恋人不花时间和我在一起时,我会感到怨恨", reverseScored: false}
])
let flag = ref(false)
let onChooseResult = val => {
  if (flag.value) return 
  let id = scoreList[active.value - 1].id
  result[id] = val
  // console.log(active.value, scoreList.length, result)
  console.log(id, result[id], val)
  if (active.value >= scoreList.length) {
    active.value = scoreList.length
    calculateECRScores()
    // step.value = 4
    // setTimeout(() => {
    //   console.log(maxVal.value.type)
    //   router.replace('/test/result?type=' + maxVal.value.type)
    // }, 4000)
    return false
  } else if (active.value < scoreList.length){
    flag.value = true
    setTimeout(() => {
      ++active.value 
      flag.value = false
    }, 200)
  }
}
// 计算焦虑回避维度
let calculateECRScores = () => {
  let scores = {
    singularSum: 0,
    evenSum: 0
  }
  Object.keys(result).forEach((key) => {
    const isReverseScored = scoreList.find(({ id }) => key === id);
    let scoreVal = result[key]
    // 反向计分
    if (isReverseScored) {
      scoreVal = 7 - scoreVal + 1;
    }
    // 双数
    if (key % 2 === 0) {
      scores.evenSum += scoreVal
    } else {
      // 单数
      scores.singularSum += scoreVal
    }
  })
  /*
    * 判断类型
    * 依恋回避均分A=（1，3，5，7……35）/18即基数项的平均得分； 单数
    * 依恋焦虑维度B=（2，4，6，……36）/18 即偶数项的平均得分  双数
    * M1安全型=A×3.2893296+B×5.4725318-11.5307833
    * M2恐惧型=A×7.2371075+B×8.1776448-32.3553266
    * M3倾注型=A×3.9246754+B×9.7102446-28.4573220
    * M4轻视型（或回避冷漠型）=A×7.3654621+B×4.9392039-22.2281088
    * 哪个得分高即为哪个型。
    * */ 
  //  单数平均值
  let singlarAverage = BigNumber(scores.singularSum / 18)
  let enevAverage = BigNumber(scores.evenSum / 18)
  //  安全 对应 安全型依附4
  let safeType = singlarAverage.multipliedBy(BigNumber(3.2893296)).plus(enevAverage.multipliedBy(BigNumber(5.4725318))).minus(11.5307833).toNumber()
  //  恐惧 对应 逃避型依附2
  let fearType = singlarAverage.multipliedBy(BigNumber(7.2371075)).plus(enevAverage.multipliedBy(BigNumber(8.1776448))).minus(32.3553266).toNumber()
  // 倾注型 对应 焦虑型依附1
  let obsessType = singlarAverage.multipliedBy(BigNumber(3.9246754)).plus(enevAverage.multipliedBy(BigNumber(9.7102446))).minus(28.4573220).toNumber()
  // 轻视 对应 矛盾型依附3
  let despiseType = singlarAverage.multipliedBy(BigNumber(7.3654621)).plus(enevAverage.multipliedBy(BigNumber(4.9392039))).minus(22.2281088).toNumber()

  let arr = [
    { type: 4, value: safeType },
    { type: 2, value: fearType },
    { type: 1, value: obsessType },
    { type: 3, value: despiseType },
  ]
  arr.forEach(item => {
    if (item.value > maxVal.value.value) {
      maxVal.value = item
    }
  })

}

</script>

<style lang="scss" scoped>
.loading {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 99999;
  bottom: 0;
  height: 100vh;
  width: 100%;
  background: url(http://cloud.mirroractivity.cn/test/back_icon.png/loadding.gif) no-repeat center center / cover;
}
.main {
  height: 100vh;
  width: 100%;
  // transition: all 10000ms ease-in-out 0s ;
  .main_bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .logo {
    position: absolute;
    top: 21px;
    left: 50%;
    transform: translateX(-50%);
  }
  .cont {
    width: 333px;
    height: 278px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .footer_btn {
    width: 165px;
    height: 45px;
    text-align: center;
    line-height: 41px;
    font-weight: bold;
    background: #C1FF00;
    color: #1E232E;
    font-size: 16px;
    position: fixed;
    left: 50%;
    bottom: 50px;
    transform: translateX(-50%);
    border-radius: 50px;
    border: 2px solid #1E232E;
  }
  // 第二部
}
.next_main {
  width: 100%;
  height: 100vh;
  background: url('http://cloud.mirroractivity.cn/test/back_icon.png/second_bg.png') no-repeat bottom 9px right 0 / 325px 438px;
  .prompt {
    width: 315px;
    height: 122px;
    background: url('http://cloud.mirroractivity.cn/test/back_icon.png/prompt_bg.png') no-repeat left top / cover;
    margin-left: 32px;
    padding: 25px 45px 0 18px;
    font-weight: bold;
    font-size: 14px;
    color: #1E232E;
    line-height: 21px;
  }
  .prompt_txt {
    font-weight: 400;
    line-height: 21px;
    margin-top: 20px;
    font-size: 14px;
    color: #C5C5C5;
    line-height: 21px;
    text-align: center;
  }
  .input_box {
    width: 183px;
    height: 43px;
    margin: 26px auto 0;
    .input {
      font-weight: bold;
      color: #C1FF00;
      line-height: 21px;
      text-stroke: .2px #000000;
      font-size: 14px;
      text-align: center;
      font-style: normal;
      -webkit-text-stroke: .2px #000000;
    }
    .input_icon {
      width: 10px;
      height: 43px;
    }

  }
 
}

.next_btn {
  opacity: 0;
  width: 322px;
  height: 45px;
  text-align: center;
  line-height: 41px;
  font-weight: bold;
  background: #C1FF00;
  color: #1E232E;
  font-size: 16px;
  margin: 0 auto;
  border-radius: 50px;
  border: 2px solid #1E232E;
  animation: animateSlide 0.5s ease-in-out 0.2s 1 normal forwards running ;
}
.back {
  // min-width: 105rpx;
  height: 21px;
  margin: 0 auto 0;
  font-weight: bold;
  font-size: 14px;
  color: #1E232E;
  line-height: 21px;
  &.mt_203 {
    margin-top: 101px;
  }
  &.mt_31 {
    margin-top: 16px;
  }
  .back_icon {
    width: 17px;
    height: 6px;
    margin-right: 8px;
  }
}
.container3 {
  padding: 61px 17px 20px 17px;
  background: url('http://cloud.mirroractivity.cn/test/back_icon.png/three_bg.png') no-repeat left -50px / 375px 295px;
  .question_desc {
    min-height: 85px;
  }
  .question_count {
    // font-size: 16px;
    // font-weight: 500;
    // color: #666;
    // line-height: 17px;
    position: absolute;
    top: -120px;
    left: -90px;
    opacity: 0.1;
    color: rgb(0, 0, 0);
    font-size: 180px;
    line-height: 370px;
    letter-spacing: -8px;
    font-weight: bold;
    max-width: calc(100% + 100px);
    overflow: hidden;
  }
  .question {
    // width: 215px;
    margin-top: 20px;
    font-weight: 500;
    padding: 0 30px;
    margin-bottom: 30px;
    font-size: 16px;
    color: #000;
    line-height: 22px;
    min-height: 35px;
  }
  .question_tips {
    width: 215px;
    height: 32px;
    // background: url('http://cloud.mirroractivity.cn/test/back_icon.png/qustion_tips.png') no-repeat left top/ 100% 100%;
    font-weight: 500;
    // font-size: 10px;
    // color: #FFFFFF;
    // line-height: 32px;
    // padding-left: 7px;
    margin-bottom: 35px;
    font-size: 13px;
    line-height: 20px;
    color: rgb(74, 74, 74);
  }
  .select_root {
    padding-left: 128px;
    .select_btn {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 50%;
      width: 12px;
      height: 12px;
      border: 2px solid #1D232F;
        margin-right: 4px;
      .select_icon {
        width: 8px;
        height: 8px;
        border-radius: 8px;
        background-color: #C1FF00;
        transform: scale(0);
        transition: transform 150ms cubic-bezier(0, 0, 0.2, 1) 0ms;
        &.on {
          transform: scale(1);
        }
      }
    }
    .select_label {
      gap: 9px;
      height: 18px;
      margin-bottom: 13px;
     font-size: 15px;
      color: #1E232E;
      line-height: 18px;
    }
  
  }
  .step {
    width: 154px;
    height: 12px;
    border: 2px solid #1E232E;
    border-radius: 12px;
    position: relative;
    .step_cont {
      background: #C1FF00;
      height: 100%;
      width: 20%;
      border-radius: 10px;
      position: absolute;
      left: 0px;
      top: 0px;
    }
  }
}
.logo {
  font-weight: bold;
  font-size: 13px;
  color: #000000;
  line-height: 18px;
  text-align: center;
  .logo_icon {
    width: 24px;
    height: 24px;
    margin-right: 5px;
  }
}
.wait {
  font-weight: 800;
  font-size: 18px;
  color: #1E232E;
  line-height: 26px;
  text-align: center;
}
.wait_img {
  margin-top: 16px;
  width: 49px;
  height: 49px;
}
@keyframes animateSlide {
  0% {
      opacity: 0;
      transform: translateY(31px);
  }
  100% {
      opacity: 1;
      transform: translateY(0px);
  }
}
 @keyframes loading {
  0% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

.loading-dot {
  display: inline-block;
  animation: loading 1s infinite;
}

.loading-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dot:nth-child(3) {
  animation-delay: 0.4s;
}
input::placeholder {
  text-stroke: 0px #000000;
  -webkit-text-stroke: 0px #000000;
  color: #C5C5C5;
}
</style>